<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: OBKoro1
 * @LastEditTime: 2022-08-05 10:44:23
-->
<template>
  <div class="mainvis">
    <div id="visTree" ref="visTree"></div>
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import { EChartsCoreOption } from "echarts";
import {
  ref,
  defineComponent,
  nextTick,
  inject,
  reactive,
  watch,
  getCurrentInstance,
} from "vue";
import reservoirData from "../../../public/js/data.js";

export default defineComponent({
  name: "visTree",
  props: {},
  setup: () => {
    const { proxy }: any = getCurrentInstance();

    // 方案参数信息
    const planDataMsgForm: any = inject("planDataMsgForm");

    watch(
      () => planDataMsgForm,
      (value: any, prevCount) => {
        proxy.throttle("visTree", () => {
          initTree(value.selectReservoir);
        });
      },
      { deep: true }
    );

    function initTree(selectReservoir) {
      const elem = document.getElementById("visTree");

      let myChart = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem);
      }

      let option = {
        title: {
          text: "",
        },
        grid: {
          width: 100,
          x: 0,
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: 10,
            roam: "none",
            label: {
              show: true,
              position: "bottom",
              fontWeight: "600",
            },
            edgeSymbol: [" ", " "],
            edgeSymbolSize: [0, 0],
            edgeLabel: {
              fontSize: 20,
            },
            data: reservoirData[selectReservoir].data,
            links: reservoirData[selectReservoir].links,
            lineStyle: {
              opacity: 1,
              width: 5,
              color: "#3399FF",
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };

      myChart.setOption(option as EChartsCoreOption);
      if (myChart != null) {
        myChart.resize();
      }

      // myChart.on("click", "series", ({ data }) => {
      //   if (data.mark && stepCurrent === 1) {
      //     siteData.stcd = data.stcd;
      //     siteData.type = data.type;
      //     siteData.name = data.name;
      //   }
      // });
    }

    return {};
  },
});
</script>

<style scoped lang="less">
.mainvis {
  width: 100%;
  min-width: 1622px;
  height: 100%;
  position: relative;
}
#visTree {
  width: 100%;
  min-width: 1622px;
  height: 100%;
}
.tezList {
  position: absolute;
  bottom: 8px;
  list-style: none;
  font-size: 14px;
  li {
    position: relative;
    width: 90px;
  }
}
.typeList {
  position: absolute;
  bottom: 8px;
  right: 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  li {
    position: relative;
    width: 90px;
    img {
      position: absolute;
      width: 20px;
      margin: 0 10px;
      right: 0;
    }
    .circle {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      border: 1px solid #000;
      margin: 0 10px;
      right: 0;
      top: 0;
    }
  }
}
.mainvis {
  position: relative;
}
.visDio {
  .el-form-item {
    margin: 0;
  }
}
.editArea {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
}
table table {
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
}

table table td {
  vertical-align: middle;
}
</style>
